<template>
  <!-- <div class="dashboard-container">
    <div class="dashboard-text">name: {{ name }}123</div>
  </div> -->
  <el-card style="margin: auto;">
    <img src="../../assets/index.jpg" alt="图片未加载" style="width: 1000px; height: auto; padding-left: 200px;">
      <div style="padding: 20px;">
        <span style="padding-left: 510px;">{{ '您的用户名：' + username }}</span>
        <div style="padding-left: 500px; padding-top: 20px;">欢迎登录农机管理平台</div>
        <div class="bottom clearfix" style="padding-left: 400px; padding-top: 20px;">
          <time class="time">{{ currentDate }}</time>
        </div>
      </div>
</el-card>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  name: "Dashboard",
  computed: {
    ...mapGetters(["username"]),
  },
  data() {
    return {
      currentDate: new Date()
    };
  },
};


</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}

.time {
    font-size: 13px;
    color: #999;
  }
  
  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
      display: table;
      content: "";
  }
  
  .clearfix:after {
      clear: both
  }
</style>
